<template>
  <div class="chart-wrapper" ref="funnelChart"></div>
</template>

<script>
import echarts from "echarts";
import { onMounted, onBeforeUnmount, ref, watch } from "vue";
import { debounce } from "@/utils/index.js";

export default {
  name: "funnelChart",
  setup() {

    const funnelChart = ref(null);
    let myChart = ref(null);

    const resizeHandler = debounce(() => {
      if (myChart) {
        myChart.resize();
      }
    }, 200);

    onMounted(() => {
      getBoxData();
      window.addEventListener("resize", resizeHandler);
    });
    onBeforeUnmount(() => {
      window.removeEventListener("resize", resizeHandler);
    });

    // //模拟接口,获取echarts数据
    const getBoxData = async () => {
      // const { data } = await selectBoxChartData({
      //   abcode,
      //   year,
      // });

      initEcharts();
    };

    //渲染echarts图
    const initEcharts = () => {
      myChart = echarts.init(funnelChart.value);
      myChart.setOption(
        {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            left: '65%',
            textStyle: { color: '#000' }
          },

          series: [
            {
              // name: 'Nightingale Chart',
              type: 'pie',
              radius: ['30%', '80%'],
              center: ['30%', '50%'],
              // roseType: 'area',
              itemStyle: {
                // borderRadius: 40,
                // borderColor: '#fff',
                borderWidth: 10
              },
              labelLine: { normal: { show: false } },
              label: { show: false },
              data: [
                {
                  value: 4, name: '进行中', itemStyle: {
                    color: '#0487ED',

                  }
                },
                {
                  value: 38, name: '已完成', itemStyle: {
                    color: '#E31D6F',

                  }
                },


              ]
            }
          ]
        },
        true
      );

      // myChart.off("click");
      // myChart.on("click", () => {
      //   routerChange("/more");
      // });
    };

 

    return {
      funnelChart,
    };
  },
};
</script>
